<template>
    <div class="pack">
        <div class="tree_container">
            <h3>电话列表</h3>
            <div class="treePack">
                <ul class="phoneList">
                    <li v-for="(list,index)  in phoneList"
                        style="cursor: pointer; line-height: 30px;padding-left: 10px;"
                        :class="{'phoneListBg':ind === index}" >
                        <Icon type="ios-telephone" style="font-size: 18px;margin-right: 10px;"></Icon>
                        <a @click="searchInfo(list.phoneNum,index)" >{{list.phoneNum}}</a>
                      <Button type="error" size="small" style="float: right" @click="remove(list.id)">删除</Button></li>
                </ul>
            </div>
            <div style="height: 35%;overflow-y:auto">
                <Form ref="mapinfo" :model="mapinfo" :rules="mapinforule" :label-width="80" style="padding-right:20px">
                    <FormItem label="电话号码" prop="phoneNum">
                        <Input v-model="mapinfo.phoneNum" size="small" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="负责人" prop="principal">
                        <Input v-model="mapinfo.principal" size="small" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="地点名称" prop="locationName">
                        <Input v-model="mapinfo.locationName" size="small" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="所属装置" prop="affiliatedDevice">
                        <Input v-model="mapinfo.affiliatedDevice" size="small" placeholder=""></Input>
                    </FormItem>
                    <FormItem label="坐标" prop="coordinate">
                        <Input v-model="mapinfo.coordinate" readonly size="small" placeholder=""></Input>
                    </FormItem>
                        <Button type="success" size="small" @click="addMapClick" style="margin-left: 15px">获取坐标点</Button>
                        <Button type="ghost" size="small" @click="reset" style="margin-left: 15px">重置</Button>
                        <Button type="primary" size="small" @click="compileSubmit('mapinfo')" style="margin-left: 15px">保存</Button>
                </Form>
            </div>
        </div>
        <div id="mapDiv" class="detail_container" style="position: absolute;left: 285px;right: 10px;height: 96.7%"></div>
    </div>
</template>

<script type="text/javascript">
    var map;
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        components: {},
        data() {
            const validatePhoneNum = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('电话号码不能为空'));
                }else {
                    for(var i=0;i<this.phoneList.length;i++){
                        if(value==this.phoneList[i].phoneNum && value!=this.mapinfo.phoneNumCopy){
                            callback(new Error('电话号码已存在'));
                            break;
                        }else if(i==this.phoneList.length-1){
                            callback();
                        }
                    }
                }
            };
            return {
                mapinfo: {
                    id: "",
                    phoneNum: "",
                    phoneNumCopy: "",
                    principal: "",
                    locationName: "",
                    affiliatedDevice: "",
                    coordinate: ""
                },
                mapinforule:{
                    phoneNum:[
//                        {required: true, message: '电话号码不能为空', trigger: 'blur' }
                        {required: true, validator: validatePhoneNum, trigger: 'blur' }
                    ],
                    principal:[
                        {required: true, message: '负责人不能为空', trigger: 'blur' }
                    ],
                    locationName:[
                        {required: true, message: '地点名称不能为空', trigger: 'blur' }
                    ],
                    affiliatedDevice:[
                        {required: true, message: '所属装置不能为空', trigger: 'blur' }
                    ],
                    coordinate:[
                        {required: true, message: '请获取坐标点', trigger: 'blur' }
                    ],
                },
                phoneList: "",
                ind: '',
            }
        },
        computed: {},
        created() {
            //this.searchRecord();
            this.searchAll();
        },
        methods: {
            //地图加载
            onLoad() {
                //初始化地图对象
                map = new T.Map("mapDiv");
                //设置显示地图的中心点和级别
                map.centerAndZoom(new T.LngLat(125.20709,46.45267), 14);
            },
            //报警点信息展示
            showAlarm() {
                //删除地图上所有覆盖物
                map.clearOverLays();
                var picArray = this.mapinfo.coordinate.split(',');
                var lnglat = new T.LngLat(picArray[0], picArray[1]);
                map.panTo(lnglat, 16);

                //创建信息窗口对象
                var infoWin = new T.InfoWindow();
                infoWin.setLngLat(lnglat);
                //设置信息窗口要显示的内容
                infoWin.setContent("电话号码：" + this.mapinfo.phoneNum + "<br/>负责人：" + this.mapinfo.principal + "<br/>地点名称：" + this.mapinfo.locationName + "<br/>所属装置：" + this.mapinfo.affiliatedDevice);
                //向地图上添加信息窗口
                map.addOverLay(infoWin);

            },
            //通过电话号码查询报警点信息
            searchInfo(val, index) {
                this.ind = index
                var _this = this;
                ezjsUtil.request(apiConstants.mapDisplay_search,
                    {
                        phoneNum: val,
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.mapinfo = data;
                        _this.mapinfo.phoneNumCopy=data.phoneNum;
                        _this.showAlarm();
                    }
                )
            },
            //查找最新报警记录
            searchRecord() {
                var _this = this;
                ezjsUtil.request(apiConstants.alarmRecord_detail, {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        if (data != null) {
                            _this.searchInfo(data.phoneNum);
                        }

                    }
                )
            },
            searchAll() {
                var _this = this;
                ezjsUtil.request(apiConstants.mapDisplay_searchAll, {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.phoneList = data;
                    }
                )
            },
            //地图修改提交
            compileSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var _this = this;
                        ezjsUtil.request(apiConstants.mapDisplay_edit,
                            {
                                id: _this.mapinfo.id,
                                phoneNum: _this.mapinfo.phoneNum,
                                principal: _this.mapinfo.principal,
                                locationName: _this.mapinfo.locationName,
                                coordinate: _this.mapinfo.coordinate,
                                affiliatedDevice: _this.mapinfo.affiliatedDevice,
                            },
                            function (err, data) {
                                if (err) {
                                    return;
                                }
                                _this.searchAll();
                                _this.reset();
                                _this.removeMapClick();
                                _this.$Message.success('提交成功!');
                                _this.mapinfo.phoneNumCopy='';
                            }
                        )
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            //注册地图点击
            addMapClick() {
                //注册地图的点击事件
                map.addEventListener("click", this.MapClick);
            },
            //移除地图点击
            removeMapClick() {
                map.removeEventListener("click", this.MapClick);
            },
            //地图点击获取坐标
            MapClick(e){
                this.mapinfo.coordinate = e.lnglat.getLng()+","+e.lnglat.getLat();
            },

            reset(){
              this.mapinfo.id = "";
              this.mapinfo.phoneNum = "";
              this.mapinfo.principal = "";
              this.mapinfo.locationName = "";
              this.mapinfo.affiliatedDevice = "";
              this.mapinfo.coordinate = "";
            },
            remove(val){
              var _this = this;
              ezjsUtil.request(apiConstants.mapDisplay_delete,
                {
                  id: val
                },
                function (err, data) {
                  if (err) {
                    return;
                  }
                  _this.searchAll();
                }
              )
            }
        },
        mounted() {
            this.onLoad();
        }
    }
</script>

<style lang="less" scoped>
    .pack {
        width: 100%;
        height: 100%;
    }

    .tree_container {
        width: 260px;
        height: 100%;
        float: left;
        border: 1px solid #d3d8e0;

    h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }

    }
    .detail_container {
    }

    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d3d8e0;
    }

    .treePack {
        height: 59%;
        padding: 10px;
        overflow: auto;
    }
    .phoneList li:hover{
        background: #f5f5f5;
    }

    .phoneListBg{
        background: #f5f5f5;
    }
    .hunttool {
        padding: 15px 0;

    .addbtn {
        margin-right: 6px;
        float: right;
    }

    .deltebtn {
        margin-right: 6px;
        float: right;
    }

    }
    .hunt {
        width: 14rem;
    }

    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }

</style>
